<template>
  <div class="slide-bar" ref="sliBar">
      <ul class="slide-waper" ref="sliWap">
          <li class="slide-item" v-for="(item,index) in fenleiList" :key="index" 
          :style="{color:currentIndex==index ? '#eb4450' : '#333',background:currentIndex ==index ?
           '#fff':'#f4f4f4'}"
           @click="changeDate(item,index)">
              {{item.cat_name}}
          </li>
      </ul>
  </div>
</template>

<script>
import {getFeileiList} from "../../Api/Fenlei/index"

export default {
name:"SlideBar",
data(){
    return{
        fenleiList:[],
        currentIndex:0
    }
},
created(){
    getFeileiList().then(res=>{
        console.log(res)
        this.fenleiList= res.data.message
         this.$emit('emitData',this.fenleiList[0])
    })
},
mounted(){//挂在完毕的生命周期
  let sY,nY
 this.$refs.sliBar.ontouchstart=(e)=>{
    console.log(e.targetTouches[0].clientY)
    sY=e.targetTouches[0].clientY
    }
    this.$refs.sliBar.ontouchend=(e)=>{
    console.log(e.changedTouches[0].clientY)
    nY=e.changedTouches[0].clientY
    if(Math.abs(nY-sY)>5){
        var t=this.$refs.sliWap.offsetTop
        var nT=nY-sY+t
    if(nT>0){
            nT=0
        }
 this.$refs.sliWap.style.top= nY - sY +t+'px'
}
 }
    // this.$refs.sliWap
},
methods:{
    changeDate(v,i){
        this.currentIndex=i
        this.$emit('emitData',v)
    }
}
}
</script>

<style lang="less" scoped>
.slide-bar{width: 100%;height: 100%; overflow: hidden;position: relative;
            .slide-waper{
                width: 100%;
                // height: 100%;
                position: absolute;top: 0;left: 0;
                // overflow:auto;
                // overflow: hidden;
                .slide-item{width: 100%;text-align: center;line-height: 50px;border-bottom: 1px solid #eee;
                background: #f4f4f4;}
            }
}

</style>